<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->


    <a-descriptions v-if="isUpdate" :column="1" bordered size="large" style="margin-bottom: 24px">
      <a-descriptions-item label="权限路径">{{ record.url }}</a-descriptions-item>
      <a-descriptions-item label="请求方式">{{ record.requestType }}</a-descriptions-item>
      <a-descriptions-item label="BEAN信息">{{ record.clsName }}</a-descriptions-item>
      <a-descriptions-item label="包路径">{{ record.pkgName }}</a-descriptions-item>
      <a-descriptions-item label="执行方法">{{ record.fun }}</a-descriptions-item>


    </a-descriptions>

    <a-form ref="formRef" :model="formState" :rules="RULES" :layout="'vertical'">
      <a-row :gutter="12">


        <a-col :span="24">
          <a-form-item label="所属模块" field="module.code" :rules="RULES.module.code">
            <smart-dict v-model="formState.module.code" :url="SystemOptions.ModuleOptions" placeholder="请选择所属模块"
                        :disabled="isUpdate"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="权限标题" field="title">
            <a-input v-model="formState.title" allow-clear placeholder="权限标题"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="权限表达式" field="expr">
            <a-input v-model="formState.expr" allow-clear placeholder="权限表达式" :disabled="isUpdate && !props.record.custom"/>
          </a-form-item>
        </a-col>


        <a-col :span="24">
          <a-form-item :label="`显示排序值 [ ${formState.sort} ]` " field="sort"
                       tooltip="升序排序 显示值越小 显示越靠前">
            <a-slider v-model="formState.sort"/>
          </a-form-item>
        </a-col>


      </a-row>


    </a-form>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>

import {EditDrawer} from '@/libs/core'
import {SystemOptions} from '@/libs/options'
import {API_EDIT} from "../resource/form";
import {SystemHttp} from '../resource/http'

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])

const {BODY, RULES} = API_EDIT
const {addApi, updateApi} = SystemHttp
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}

const service = new EditDrawer(config).setAddRequest(addApi).setUpdateRequest(updateApi)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改权限' : '新建权限'
</script>
